<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
                template="./../template/common.xhtml"
                xmlns:p="http://primefaces.org/ui"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core">

    <ui:define name="title">
         Pick student for course
    </ui:define>

    <ui:define name="head">
        <script src="../../res/js/jquery-1.10.2.min.js"></script>
        <script src="../../res/js/jquery-ui-1.10.0.custom.js"></script>
          <link rel="stylesheet" href="../../res/css/admin-style.css"/>
    </ui:define>

    <ui:define name="pageheader">
        Pick student for course #{courseStudentManager.currCourse.centers.name} #{courseStudentManager.currCourse.name}
        <br></br>
        Course ID: #{courseStudentManager.currCourse.courseId}
    </ui:define>

    <ui:define name="content">
        <h:form id="f1">
            <div class="page-header">
                Students belong to course
            </div>
            <p:dataTable  id="t1" value="#{courseStudentManager.targetStudent}" var="s" paginator="true" rows="10">
                <p:column>
                    <f:facet name="header">Student ID</f:facet>
                    #{s.studentId}
                </p:column>
                <p:column>
                    <f:facet name="header">Student name</f:facet>
                    #{s.accounts.fullName}
                </p:column>
                <p:column>
                    <f:facet name="header">Birthday</f:facet>
                    #{s.accounts.birthday}
                </p:column>
                <p:column>
                    <f:facet name="header">Email</f:facet>
                    #{s.accounts.email}
                </p:column>
                <p:column>
                    <f:facet name="header"></f:facet>
                    <p:commandButton value="Remove" action="#{courseStudentManager.remove(s)}" update="@form" />
                </p:column>
            </p:dataTable>
            <div class="page-header">
                Available students
            </div>
            <p:dataTable id="t2" value="#{courseStudentManager.sourseStudent}" var="s" paginator="true" rows="10">
                <p:column>
                    <f:facet name="header">Student ID</f:facet>
                    #{s.studentId}
                </p:column>
                <p:column>
                    <f:facet name="header">Student name</f:facet>
                    #{s.accounts.fullName}
                </p:column>
                <p:column>
                    <f:facet name="header">Birthday</f:facet>
                    #{s.accounts.birthday}
                </p:column>
                <p:column>
                    <f:facet name="header">Email</f:facet>
                    #{s.accounts.email}
                </p:column>
              
                <p:column>
                    <f:facet name="header"></f:facet>
                    <p:commandButton value="Add" action="#{courseStudentManager.add(s)}" update="@form" />
                </p:column>
            </p:dataTable>
            <div>
                
                <h:commandButton value="Update" action="#{courseStudentManager.update()}" />
            </div>
        </h:form>

    </ui:define>

</ui:composition>
